import React from 'react'
import styled from 'styled-components'
import './icon.css'

const Fs = styled.div`
    height: 3rem;
    width: 100vw;
    padding-bottom: 0.1rem;
    background-color: #fefffe;
    .header{
        height: 1rem;
        width: 100vw;
        display: flex;
        align-items: center;
        position: relative;
        .img{
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 30%;
            margin-left: 0.5rem;
        }
        .header-topic{
            font-size: 14px;
            font-weight: 700;
            padding-left: 0.1rem;
            color: #96999e;
            font-family: Microsoft YaHei;
        }
        .header-name{
            padding-left: 0.6rem;
            font-size: 12px;
            font-weight: 500;
            color: #96999e;
            font-family: Microsoft YaHei;
        }
    }
    .middle{
        width: 10rem;
        word-break: break-all;
        height: 1rem;
        display: flex;
        align-items: center;
        .mid-p{
            font-weight: 500;
            font-size: 17px;
            font-family: Microsoft YaHei;
            margin-left: 1rem;
        }
    }
    .bottom{
        display: flex;
        align-items: center;
        position: relative;
        height: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 0.2px solid #cbccce;
    }
`
export default function FocusItem(props) {
    const {item} =props
    
    return (
        <Fs>
           <div className="header" >
                <img src={item.imgsrc} className='img' />
                <p className='header-topic'>{item.hupuaddress}</p>
                <p className='header-name'>{item.name}</p>
                <div className='FocusItem-iconfont FocusItem-icon-diandian'></div>
           </div>
           <div className="middle" >
                <p className='mid-p' >{item.title}</p> 
           </div>
           <div className="bottom">
               <div className="FocusItem-iconfont FocusItem-icon-pinglun">{item.number}</div>
               <div className="FocusItem-iconfont FocusItem-icon-dianzan">{item.number2}</div>
               <div className="FocusItem-iconfont FocusItem-icon-dengpaotishi">{item.number3}</div>
           </div>
        </Fs>
    )
}
